<template>
  <span ref="scrollIntoView"></span>
  <div class="exhibits-box">
    <div class="title">
      <titles title="展品图库" />
    </div>
    <div>
      <div class="search-box">
        <div
          class="search"
          :class="{
            search1: store.styleInfo.themeColor == '#CFBDA8',
            search2: store.styleInfo.themeColor == '#8F9EBF',
            search3: store.styleInfo.themeColor == '#B9463F',
            search4: store.styleInfo.themeColor == '#343029',
            search5: store.styleInfo.themeColor == '#171719',
          }"
        >
          <input
            type="text"
            class="input"
            placeholder=" 输入展品名称查找"
            v-model="parmas.value"
            @change="inputChange"
          />
          <div class="SearchTo" :style="{ color: store.styleInfo.themeColor }">搜索</div>
        </div>
        <div
          class="select"
          @click="
            {
              showBottom = true;
            }
          "
          :style="{ color: store.styleInfo.themeColor }"
        >
          <i class="doorIcon" style="font-size: 20px">&#xe666;</i>
          <div style="position: relative">
            筛选
            <div class="Tips" v-show="!isParams"></div>
          </div>
        </div>
      </div>
      <div>
        <div v-for="(item, index) in selectInfo" :key="index" class="showText">
          <div v-if="selectInfo[index]" class="showText-box">
            <span>{{ selectInfo[index] === '全部' ? '' : selectInfo[index] }}</span>
            <van-icon name="delete-o" @click="clearSolo(index)" />
          </div>
        </div>
        <div class="clear" @click="clear" v-if="isClear > 0">重置</div>
      </div>
      <!-- <seach @seachInfo="seachInfo" /> -->
      <div class="exhibits-content" v-if="total > 0">
        <t-row :gutter="20">
          <t-col :span="6" v-for="(item, index) in list" :key="item.id">
            <div class="exhibits-item" @click="pathInfo(item.id, item.moduleId)">
              <div class="exhibits-item-img" style="overflow: hidden">
                <img
                  :style="{ background: store.styleInfo.auxiliaryColor }"
                  class="exhibits-item-img t-image--fit-contain t-image--position-center"
                  :src="$filters.getLinkUrl(item.coverUrl + '?imageView2/0/h/165/format/webp')"
                  alt=""
                />
                <!-- <div class="shadow"></div> -->
              </div>
              <div class="item-title">
                <span :class="'titleText' + item.id"> {{ item.name }}</span>
                <!-- <div class="line" :class="'line' + item.id"></div> -->
              </div>
            </div>
          </t-col>
        </t-row>
      </div>
      <div v-else style="display: flex; justify-content: center; align-items: center; height: 300px">暂无相关数据</div>
      <!-- <t-row v-if="total > 12">
        <t-col
          :span="12"
          :class="{
            't-pagination0': store.styleInfo.themeColor == '#CFBDA8',
            't-pagination1': store.styleInfo.themeColor == '#8F9EBF',
            't-pagination2': store.styleInfo.themeColor == '#B9463F',
            't-pagination3': store.styleInfo.themeColor == '#343029',
            't-pagination4': store.styleInfo.themeColor == '#171719',
          }"
        >
          <t-pagination
            v-model="parmas.pageNo"
            v-model:pageSize="parmas.pageSize"
            :total="total"
            :showPageSize="false"
            show-jumper
            @change="onChange"
            @page-size-change="onPageSizeChange"
            @current-change="onCurrentChange"
          />
        </t-col>
      </t-row> -->
    </div>
  </div>
  <div :class="'popStyle' + store.styleInfo.colorType" class="popStyle">
    <van-popup round :teleport="el" v-model:show="showBottom" position="bottom" :style="{ height: '50%' }">
      <div class="popup-header">
        <div class="cancel" @click.stop="cancel" :style="{ color: store.styleInfo.shmentColor, opacity: 0.5 }">
          取消
        </div>
        <div class="filter">筛选</div>
        <div class="ok" @click.stop="OkCallback" :style="{ color: store.styleInfo.shmentColor }">确认</div>
      </div>
      <div class="select-box">
        <div @click="selectIndex = 0" :class="{ selectAcrive: selectIndex == 0 }">
          <div class="select-item">单元</div>
          <van-picker
            v-model="unitPicker"
            v-show="selectIndex === 0"
            :columns="datas.moduleList"
            @change="onChange"
            :columns-field-names="{
              text: 'name',
              value: 'id',
              children: 'children',
            }"
          />
        </div>
        <div @click="selectIndex = 1" :class="{ selectAcrive: selectIndex == 1 }">
          <div class="select-item">类型</div>
          <van-picker
            v-model="typePicker"
            v-show="selectIndex === 1"
            :columns="datas.select3"
            @change="onChange"
            :columns-field-names="{
              text: 'text',
              value: 'id',
              children: 'children',
            }"
          />
        </div>
        <div @click="selectIndex = 2" :class="{ selectAcrive: selectIndex == 2 }">
          <div class="select-item">年代</div>
          <van-cascader
            v-if="cascaderShow"
            v-model="agePicker"
            v-show="selectIndex === 2"
            :options="datas.select4"
            @change="onChange"
            @finish="onFinish"
            :field-names="{
              text: 'text',
              value: 'id',
              children: 'children',
            }"
          />
        </div>
        <div @click="selectIndex = 3" :class="{ selectAcrive: selectIndex == 3 }">
          <div class="select-item">单位</div>
          <van-picker
            v-model="CompanyPicker"
            v-show="selectIndex === 3"
            :columns="datas.company"
            @change="onChange"
            :columns-field-names="{
              text: 'name',
              value: 'id',
              children: 'children',
            }"
          />
        </div>
        <div @click="selectIndex = 4" :class="{ selectAcrive: selectIndex == 4 }">
          <div class="select-item">级别</div>
          <van-picker
            v-model="levelPicker"
            v-show="selectIndex === 4"
            :columns="datas.select1"
            @change="onChange"
            :columns-field-names="{
              text: 'text',
              value: 'id',
              children: 'children',
            }"
          />
        </div>
      </div>
    </van-popup>
  </div>
  <NavVue :flag="true" @top="top"></NavVue>
</template>

<script lang="ts">
// @ts-nocheck
import { defineComponent, onMounted, ref, computed, reactive, nextTick } from 'vue';

export default defineComponent({
  name: 'templateExhibitsLoopWap',
});
</script>
<script lang="ts" setup>
// @ts-nocheck
import NavVue from './wapComponents/nav.vue';
import { defineComponent, onMounted, ref, computed, reactive, nextTick } from 'vue';
import { pathList, pathListLoop } from '../route';
import IsNull from '../WapComponents/isNull.vue';
import { useRoute, useRouter } from 'vue-router';
import { path, pathLoop } from '../path';
import { companysData, exhibitionData, modulesData } from '@/api/templates/templates';
import { useProjectStore } from '@/store';
import titles from '@/wap/wapPage/wapComponents/title/title.vue';
import { treeList } from '@/api/user/user';
const scrollIntoView = ref(null);
const flag = ref(false);
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const ismask = ref(-1);
const showBottom = ref(false);
// const el = ref();
const unitPicker = ref([0]); //单元下拉框绑定值
const typePicker = ref([0]); //类型下拉框绑定值
const levelPicker = ref([0]); //级别下拉框绑定值
const agePicker = ref(0); //年代下拉框绑定值
const CompanyPicker = ref([0]); //单位下拉框绑定值
// onMounted(() => {
//   el.value = document.querySelector('.turn');
// });
const unitModelRef = ref();
const cascaderShow = ref(true);
const parmas = ref({
  value: '',
  typeId: 0,
  ageId: 0,
  levelId: 0,
  ModuleId: 1,
  CompanyId: -1,

  pageNo: 1,
  pageSize: 1000,
});

const total = ref();
const list = ref();
// const myClassRow = ref();
// const myage = ref();
// const myLevel = ref();
const datas = reactive({
  select1: [{ id: -1, text: '全部' }], //级别
  select2: [{ id: 0, text: '全部' }], //来源
  select3: [{ id: -1, text: '全部' }], //类型
  select4: [{ id: -1, text: '全部' }], //年代
  company: [], //单位
  moduleList: [], //单元
});
const selectIndex = ref(0);
const selectData = ref(['单元', '类型', '年代', '单位', '级别']);
const typeText = ref({});
const showInfo = ref();
const selectInfo = ref({ typeId: '', ageId: '', levelId: '', ModuleId: '', CompanyId: '', value: '' }); //显示的筛选项
const selectInfo2 = ref({ typeId: '', ageId: '', levelId: '', ModuleId: '', CompanyId: '', value: '' }); //选择后记录的筛选项
// const selectValue = ref({});
const init = async () => {
  try {
    // myStore.myPramasWap.id = 0;
    let { data } = await exhibitionData(localStorage.getItem('projectId'), parmas.value);
    total.value = data.total;
    list.value = data.data;
  } catch {}
};
init();

const getUnit = async () => {
  try {
    let { data } = await companysData(localStorage.getItem('projectId')); //单位
    console.log(data);

    let res = await treeList(371994471206981); //级别
    let res2 = await treeList(371999507447877); //类型
    let res3 = await treeList(372051821408325); //年代
    let DataList = await modulesData(localStorage.getItem('projectId'));
    showInfo.value = DataList.data;
    typeText.value = { text: 'name', value: 'id' };
    console.log(showInfo.value);

    datas.select1 = datas.select3.concat(res.data);
    datas.select3 = datas.select3.concat(res2.data);
    datas.select4 = datas.select4.concat(res3.data);
    deepDelete(datas.select4);
    datas.company = data;
    datas.moduleList = DataList.data;
    // myLevel.value = datas.select1.concat(res.data);
    // myClassRow.value = datas.select3.concat(res2.data);
    // myage.value = datas.select4.concat(res3.data);
  } catch {}
};
getUnit();

// 跳转展品详情页
const toExhibits = (moduleId: number, id: number) => {
  router.push({
    name: 'TemplateItemExhibitsLoopWap',
    query: { moduleId, id, from: 0 },
  });
};
// 选择筛选数据
const onChange = (selectedValues, index: number) => {
  // 将选择的事件收集，等待确定后更新数据
  // selectValue.value = selectedValues.selectedOptions[0];
  let selectValue = selectedValues.selectedOptions[0];
  // console.log('----selectInfo', selectInfo.value);
  console.log(agePicker.value, '---');

  if (selectedValues.selectedOptions[0].name !== '全部') {
    switch (selectIndex.value) {
      case 0:
        // parmas.value.ModuleId = selectValue.id;
        selectInfo2.value.ModuleId = selectValue.name;

        break;
      case 1:
        // parmas.value.typeId = selectValue.id;
        selectInfo2.value.typeId = selectValue.text;
        break;
      case 2:
        // parmas.value.ageId = selectedValues.selectedOptions[selectedValues.selectedOptions.length - 1].id;
        selectInfo2.value.ageId = selectedValues.selectedOptions[selectedValues.selectedOptions.length - 1].text;
        break;
      case 3:
        // parmas.value.CompanyId = selectValue.id;
        selectInfo2.value.CompanyId = selectValue.name;
        break;
      case 4:
        // parmas.value.levelId = selectValue.id;
        selectInfo2.value.levelId = selectValue.text;
        break;
    }
  } else {
    switch (selectIndex.value) {
      case 0:
        parmas.value.ModuleId = 1;
        selectInfo2.value.ModuleId = '';

        break;
      case 1:
        parmas.value.typeId = 0;
        selectInfo2.value.typeId = '';
        break;
      case 2:
        parmas.value.ageId = 0;
        selectInfo2.value.ageId = '';
        break;
      case 3:
        parmas.value.CompanyId = -1;
        selectInfo2.value.CompanyId = '';
        break;
      case 4:
        parmas.value.levelId = 0;
        selectInfo2.value.levelId = '';
        break;
    }
  }
  console.log(selectInfo.value, 'break');
};
function deepClone(o) {
  // 判断如果不是引用类型，直接返回数据即可

  if (typeof o === 'string' || typeof o === 'number' || typeof o === 'boolean' || typeof o === 'undefined') {
    return o;
  } else if (Array.isArray(o)) {
    // 如果是数组，则定义一个新数组，完成复制后返回
    // 注意，这里判断数组不能用typeof，因为typeof Array 返回的是object
    console.log(typeof []); // --> object
    var _arr = [];

    o.forEach((item) => {
      _arr.push(item);
    });
    return _arr;
  } else if (typeof o === 'object') {
    var _o = {};
    for (let key in o) {
      _o[key] = deepClone(o[key]);
    }
    return _o;
  }
}

// 确定选择
const OkCallback = () => {
  showBottom.value = false;
  // 判断当前所在分类，更新对应分类数据
  // console.log('是否走了OkCallback');

  selectInfo.value = deepClone(selectInfo2.value);
  parmas.value.ModuleId = unitPicker.value[0];
  parmas.value.typeId = typePicker.value[0];
  parmas.value.levelId = levelPicker.value[0];
  parmas.value.ageId = agePicker.value;
  parmas.value.CompanyId = CompanyPicker.value[0];

  init();
};
//取消筛选
const cancel = () => {
  showBottom.value = false;
  unitPicker.value = [parmas.value.ModuleId];
  typePicker.value = [parmas.value.typeId];
  levelPicker.value = [parmas.value.levelId];
  agePicker.value = parmas.value.ageId;
  CompanyPicker.value = [parmas.value.CompanyId];
  console.log(unitPicker.value, '++++++');
};
// 清除单个
const clearSolo = (data: string) => {
  switch (data) {
    case 'ModuleId':
      parmas.value.ModuleId = 1;
      selectInfo.value.ModuleId = '';
      selectInfo2.value.ModuleId = '';
      unitPicker.value = [1];
      break;
    case 'typeId':
      parmas.value.typeId = 0;
      selectInfo.value.typeId = '';
      selectInfo2.value.typeId = '';
      typePicker.value = [0];
      break;
    case 'ageId':
      cascaderShow.value = false;
      parmas.value.ageId = 0;
      selectInfo.value.ageId = '';
      selectInfo2.value.ageId = '';
      agePicker.value = [0];
      nextTick(() => {
        cascaderShow.value = true;
      });
      break;
    case 'CompanyId':
      parmas.value.CompanyId = -1;
      selectInfo.value.CompanyId = '';
      selectInfo2.value.CompanyId = '';
      CompanyPicker.value = [-1];
      break;
    case 'levelId':
      parmas.value.levelId = 0;
      selectInfo.value.levelId = '';
      selectInfo2.value.levelId = '';
      levelPicker.value = [0];
      break;
    case 'value':
      parmas.value.value = '';
      selectInfo.value.value = '';
      selectInfo2.value.value = '';
      break;
  }
  init();
};
// 重置
const clear = () => {
  cascaderShow.value = false;
  parmas.value = {
    value: '',
    typeId: 0,
    ageId: 0,
    levelId: 0,
    ModuleId: 1,
    CompanyId: -1,

    pageNo: 1,
    pageSize: 1000,
  };
  selectInfo.value = { typeId: '', ageId: '', levelId: '', ModuleId: '', CompanyId: '', value: '' };
  selectInfo2.value = { typeId: '', ageId: '', levelId: '', ModuleId: '', CompanyId: '', value: '' };
  unitPicker.value = [1];
  typePicker.value = [0];
  agePicker.value = [];
  CompanyPicker.value = [-1];
  levelPicker.value = [0];
  selectIndex.value = 0;
  init();
  nextTick(() => {
    cascaderShow.value = true;
  });
};
// 判断是否进行了筛选
const isParams = computed(() => {
  return (
    (selectInfo.value.value === '' &&
      selectInfo.value.typeId === '' &&
      selectInfo.value.ageId === '' &&
      selectInfo.value.levelId === '' &&
      selectInfo.value.ModuleId === '' &&
      selectInfo.value.CompanyId === '') ||
    selectInfo.value.value == '全部' ||
    selectInfo.value.typeId == '全部' ||
    selectInfo.value.ageId == '全部' ||
    selectInfo.value.levelId == '全部' ||
    selectInfo.value.ModuleId == '全部' ||
    selectInfo.value.CompanyId == '全部'
  );
});
// 表单搜索
const inputChange = () => {
  selectInfo.value.value = parmas.value.value;
  init();
};
// 递归判断没有chidlren的对象，把chidlren删除
const deepDelete = (list: any) => {
  list.forEach((item: any) => {
    if (item.children?.length > 0) {
      deepDelete(item.children);
    } else {
      delete item.children;
    }
  });
};
// 多级连选事件
const onFinish = (a: any) => {
  // 将选择的事件收集，等待确定后更新数据
  // selectValue.value = a.selectedOptions[a.selectedOptions.length - 1];
};
// 监听是否重置
const isClear = computed(() => {
  let num = 0;
  for (let item in selectInfo.value) {
    console.log(selectInfo.value);

    if (selectInfo.value[item]) {
      num += 1;
    }
  }
  return num;
});
const pathInfo = (e?: number, moduleId: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: moduleId },
  });
};
const top = () => {
  if (scrollIntoView) {
    scrollIntoView.value.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
};
</script>

<style lang="less" scoped>
.title-box {
  font-size: 17px;
  font-family: SourceHanSerif;
  font-weight: 500;
  color: #333333;
  line-height: 32px;
  margin-top: 50px;
}
.exhibits-box {
  padding: 24px 0px;
  padding-top: 74px;
  width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - 28px);
  // overflow: auto;
}
.title {
  height: 36px;
  display: flex;

  justify-content: center;
  align-items: center;
  // margin-top: 50px;
}
.t-row {
  margin: 0;
}
.exhibits-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  transition: all 0.5s;
  cursor: pointer;
  .exhibits-item-img {
    width: 100%;
    height: 165px;
  }
  img {
    // height: 210px;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
  }
}
.item-title {
  width: 100%;

  padding-top: 6px;
  padding-bottom: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  span {
    font-size: 15px;
    // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    font-weight: 400;
    color: #333333;
    // line-height: 28px;
  }
}
.exhibits-content {
  margin-top: 24px;

  padding: 0 16px;
}
.shadow {
  width: 280px;
  height: 210px;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0);
  transition: all 0.5s;
  z-index: 99;

  // border-radius: 50%;
}
// .exhibits-item:hover .shadow {
//   background: rgba(0, 0, 0, 0.4);
// }
// .exhibits-item:hover img {
//   transform: scale(1.1);
// }
.search-box {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  margin-top: 14px;
  .search {
    display: flex;
    width: 100%;
    margin: 0px auto;
    flex: 1;
    border-radius: 4px;
  }
  .input {
    flex: 1;
    height: 40px;
    border: none;
    outline: none;
    padding: 0px 4px;
    background-color: transparent !important;
  }
  .input::placeholder {
    color: #333;
    opacity: 0.3;
    font-size: 14px;
  }
  .SearchTo {
    width: 73.213px;
    height: 100%;

    font-size: 16px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
  }
  .select {
    width: 57px;
    height: 28px;
    font-size: 14px;

    text-align: center;
    line-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    :deep(.t-icon) {
      font-size: 19px;
      margin-top: -3px;
    }
  }
}
.search1 {
  background: rgba(207, 189, 168, 0.12);
}
.search2 {
  background: rgba(143, 158, 191, 0.12);
}
.search3 {
  background: rgba(185, 70, 63, 0.12);
}
.search4 {
  background: rgba(52, 48, 41, 0.12);
}
.search5 {
  background: rgba(23, 23, 25, 0.12);
}
.popup-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0px 17px;
  font-size: 18px;
  margin-top: 18px;
  color: #333;
}
.select-box {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 0 16px;
  padding-top: 14px;
  justify-content: space-between;
  .select-item {
    width: 45px;
    text-align: center;
    color: #333;

    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 155.556% */
    // text-decoration-line: underline;
  }
  > div {
    width: 36px;
    height: 28px;
    flex-shrink: 0;
  }
  :deep(.van-picker) {
    position: absolute;
    width: 100%;
    left: 0;
  }
  :deep(.van-cascader) {
    position: absolute;
    width: 100%;
    left: 0;
  }
  :deep(.van-cascader__header) {
    display: none;
  }
  :deep(.van-tabs__line) {
    // left: 16px;
    transform: translateX(16px);
  }
  :deep(.van-tabs__content--animated) {
    // overflow: auto;
  }
}
.selectAcrive {
  > .select-item {
    border-bottom: 1px solid #333;
  }
}
:deep(.van-picker__toolbar) {
  display: none;
}
:deep(.van-popup) {
  height: 65% !important;
  overflow: hidden !important;
}
.filter {
  color: #333;
  font-weight: 600;
  font-size: 18px;
}
.ok {
  font-weight: 600;
}
/deep/ li {
  font-family: none !important;
}
.showText-box {
  font-size: 14px;
  margin-top: 10px;
  width: 343px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    text-decoration: underline;
  }
  :deep(.van-badge__wrapper) {
    font-size: 16px;
    color: #333;
  }
}
.showText {
  width: 100%;
  display: flex;
  justify-content: center;
}
.Tips {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: red;
  position: absolute;
  top: 3px;
  right: -3px;
}
.clear {
  width: 65px;
  height: 26px;
  border: solid 1px #333;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px auto;
  margin-top: 20px;
}
.popStyle {
  :deep(.van-picker-column__item--selected) {
    color: rgba(51, 51, 51, 1) !important;
  }
  :deep(.van-picker-column__item--selected .van-ellipsis) {
    font-size: 18px !important;
  }
  :deep(.van-picker-column__item) {
    color: rgba(51, 51, 51, 0.5);
    line-height: 28px;
  }
}
.popStyle1 {
  :deep(.van-popup) {
    background: #f0e9e1;
  }
  :deep(.van-tabs__nav) {
    background: #f0e9e1;
  }
  :deep(.van-tabs__line) {
    background: #cfbda8;
  }
  :deep(.van-cascader__option--selected) {
    color: #cfbda8;
  }
  :deep(.van-picker) {
    background: #f0e9e1;
    --van-picker-mask-color: linear-gradient(
        180deg,
        rgba(240, 233, 225, 0.9) 0%,
        rgba(240, 233, 225, 0.5) 99.5%,
        rgba(102, 102, 102, 0.1) 50%
      ),
      linear-gradient(0deg, rgba(240, 233, 225, 0.9) 0%, rgba(240, 233, 225, 0.5) 99.5%, rgba(102, 102, 102, 0.1) 50%) !important;
  }
}
.popStyle2 {
  :deep(.van-popup) {
    background: #f0f3f6;
  }
  :deep(.van-tabs__nav) {
    background: #f0f3f6;
  }
  :deep(.van-tabs__line) {
    background: #8f9ebf;
  }
  :deep(.van-cascader__option--selected) {
    color: #8f9ebf;
  }
  :deep(.van-picker) {
    background: #f0f3f6;
    --van-picker-mask-color: linear-gradient(
        180deg,
        rgba(240, 243, 246, 0.9) 0%,
        rgba(240, 243, 246, 0.5) 99.5%,
        rgba(102, 102, 102, 0.1) 50%
      ),
      linear-gradient(0deg, rgba(240, 243, 246, 0.9) 0%, rgba(240, 243, 246, 0.5) 99.5%, rgba(102, 102, 102, 0.1) 50%) !important;
  }
}
.popStyle3 {
  :deep(.van-popup) {
    background: #faf5ed;
  }
  :deep(.van-tabs__nav) {
    background: #faf5ed;
  }
  :deep(.van-tabs__line) {
    background: #b9463f;
  }
  :deep(.van-cascader__option--selected) {
    color: #b9463f;
  }
  :deep(.van-picker) {
    background: #faf5ed;
    --van-picker-mask-color: linear-gradient(
        180deg,
        rgba(250, 245, 237, 0.9) 0%,
        rgba(250, 245, 237, 0.5) 99.5%,
        rgba(102, 102, 102, 0.1) 50%
      ),
      linear-gradient(0deg, rgba(250, 245, 237, 0.9) 0%, rgba(250, 245, 237, 0.5) 99.5%, rgba(102, 102, 102, 0.1) 50%) !important;
  }
}
.popStyle4 {
  :deep(.van-popup) {
    background: #e0e5e5;
  }
  :deep(.van-tabs__nav) {
    background: #e0e5e5;
  }
  :deep(.van-tabs__line) {
    background: #343029;
  }
  :deep(.van-cascader__option--selected) {
    color: #343029;
  }
  :deep(.van-picker) {
    background: #e0e5e5;
    --van-picker-mask-color: linear-gradient(
        180deg,
        rgba(224, 229, 229, 0.9) 0%,
        rgba(224, 229, 229, 0.5) 99.5%,
        rgba(102, 102, 102, 0.1) 50%
      ),
      linear-gradient(0deg, rgba(224, 229, 229, 0.9) 0%, rgba(224, 229, 229, 0.5) 99.5%, rgba(102, 102, 102, 0.1) 50%) !important;
  }
}
.popStyle5 {
  :deep(.van-popup) {
    background: #e1dfe0;
  }
  :deep(.van-tabs__nav) {
    background: #e1dfe0;
  }
  :deep(.van-tabs__line) {
    background: #171719;
  }
  :deep(.van-cascader__option--selected) {
    color: #171719;
  }
  :deep(.van-picker) {
    background: #e1dfe0;
    --van-picker-mask-color: linear-gradient(
        180deg,
        rgba(225, 223, 224, 0.9) 0%,
        rgba(225, 223, 224, 0.5) 99.5%,
        rgba(102, 102, 102, 0.1) 50%
      ),
      linear-gradient(0deg, rgba(225, 223, 224, 0.9) 0%, rgba(225, 223, 224, 0.5) 99.5%, rgba(102, 102, 102, 0.1) 50%) !important;
  }
}
:deep(.van-cascader__option:active) {
  background-color: transparent !important;
}
</style>
